<!-- src/views/AccountCenter/TicketBuyer.vue -->
<template>
  <div class="ticket-buyer-container">
    <!-- 头部操作栏 -->
    <div class="header">
      <h2 class="title">常用购票人管理</h2>
      <el-button type="primary" class="create-btn" @click="showDialog">
        + 新建购票人
      </el-button>
    </div>

    <!-- 票购人列表 -->
    <div class="buyer-list" v-if="buyers.length > 0">
      <el-table :data="buyers" style="width: 100%">
        <el-table-column prop="index" label="序号" width="80">
          <template #default="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="idType" label="证件类型" width="180"></el-table-column>
        <el-table-column prop="idNumber" label="证件号"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button link type="danger" @click="deleteBuyer(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 空状态 -->
    <div class="empty-state" v-else>
      <svg class="empty-icon" viewBox="0 0 48 48">
        <path fill="#999"
          d="M24 8c-4.42 0-8 3.58-8 8 0 4.41 3.58 8 8 8s8-3.59 8-8c0-4.42-3.58-8-8-8zm12 26v6H12v-6c0-3.33 3.33-5 6-5h12c2.67 0 6 1.67 6 5z" />
      </svg>
      <p class="empty-text">您还未添加购票人信息，提前添加可以使抢票速度更快哦~</p>
    </div>

    <!-- 新增购票人弹窗 -->
    <el-dialog v-model="dialogVisible" title="新建购票人" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="form.idCard" placeholder="请输入身份证号码" maxlength="18" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
        </el-form-item>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const dialogVisible = ref(false)
const form = reactive({
  name: '',
  idCard: '',
  phone: ''
})

const buyers = ref([])

const showDialog = () => {
  dialogVisible.value = true
}

const submitForm = () => {
  if (form.name && form.idCard) {
    // 保存购票人信息
    buyers.value.push({
      index: buyers.value.length,
      name: form.name,
      idType: '身份证',
      idNumber: `${form.idCard.slice(0, 3)}************${form.idCard.slice(-3)}`,
      phone: form.phone
    })
    // 清空表单
    Object.assign(form, {
      name: '',
      idCard: '',
      phone: ''
    })
    dialogVisible.value = false
  } else {
    alert('请填写完整信息')
  }
}

const deleteBuyer = (index) => {
  buyers.value.splice(index, 1)
}
</script>

<style scoped>
.ticket-buyer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.create-btn {
  background: #230303;
  border-color: #230303;
  padding: 10px 20px;

  &:hover {
    background: #ff4081;
    border-color: #ff4081;
  }
}

.empty-state {
  text-align: center;
  padding: 80px 0;
  border: 1px dashed #eee;
  border-radius: 4px;
}

.empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.empty-text {
  color: #999;
  font-size: 14px;
  margin: 0;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

.buyer-list {
  margin-top: 20px;
}

/* 保持侧边栏激活状态 */
.nav-item.active {
  color: #ff4081;
  background: #fff5f7;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ff4081;
  }
}
</style>